<template>
    <div class="container role ">
        <div class="container-top">
            <div class="top-name">管理员管理</div>
        </div>
        <el-tabs v-model="url" @tab-click="handleClick">
            <el-tab-pane label="账户管理" name="accountList"></el-tab-pane>
            <el-tab-pane label="角色管理" name="roleList"></el-tab-pane>
        </el-tabs>
        <div class="input_modal">
            <div class="modal-list">
                <div class="input-item">
                    <span class="name">手机号：</span>
                    <el-input v-model="mobile" placeholder="请输入内容" class="" @keyup.enter.native="search"></el-input>
                </div>
                <div class="input-item">
                    <span class="name">姓名：</span>
                    <el-input v-model="trueName" placeholder="请输入内容" class="" @keyup.enter.native="search"></el-input>
                </div>
            </div>
            <div class="btns-top">
                <el-button
                type="primary"
                size="mini"
                icon="el-icon-search"
                @click="getAccountList(1)"
                >查询</el-button>
                <el-button
                size="mini"
                icon="el-icon-refresh"
                @click="refresh"
                >重置</el-button>
            </div>
            <div class="input_modal add">
                <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-plus"
                    @click="addItem"
                >新增账户</el-button>
            </div>
        </div>
        <div class="table_con">
            <el-table  :data="tableData"  stripe >
                  <el-table-column  prop="userName"    label="登录名"></el-table-column>
                  <el-table-column  prop="trueName" label="姓名"></el-table-column>
                  <el-table-column  prop="mobile" label="手机"></el-table-column>
                  <el-table-column  prop="roleName" label="所属角色"></el-table-column>
                  <el-table-column  prop=""  label="操作" fixed="right" >
                      <template slot-scope="scope">
                          <el-button class="link" type="info" size="mini">
                               <router-link :to="{ name: 'accountEdit', query: {id:tableData[scope.$index].id,pageIndex:pageIndex}}"  style="color: #fff;">编辑</router-link>
                          </el-button>
                        <el-button type="primary" size="mini" @click="handleAble(scope.row)">{{scope.row.enable == 'y' ? '禁用' : '启用'}}</el-button>
                        <el-button type="danger" size="mini" v-if="scope.row.userName != 'admin'" @click="deleteAccount(tableData[scope.$index].id)">删除</el-button>
                      </template>
                  </el-table-column>
            </el-table>
        </div>

        <div class="pagination">
             <el-pagination   @size-change="handleSizeChange"  @current-change="handleCurrentChange"
                :current-page.sync="pageIndex"
                :page-size="pageSize"
                :page-sizes='[10,20,30,40]'
                layout="sizes, prev, pager, next"
                :total="pageCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return {
            tableData:[],
            trueName:'',
            mobile:'',
            pageCount:null,
            pageIndex:1,
            pageSize:10,
            url: 'accountList',
        }
    },
    mounted() {
        let pageUrlIndex = this.$route.params.pageIndex;
        console.log('123',pageUrlIndex);
        if(!!pageUrlIndex){
            this.pageIndex = pageUrlIndex;
            this.getAccountList();
        }else{
            this.getAccountList();
        }
    },
    methods: {
        refresh(){
            this.pageIndex = 1
            this.trueName = ''
            this.mobile = ''
            this.getAccountList()
        },
        getAccountList:function(){
           let url = CONSTANT.URL.SYSTEM.FINDADMINUSERBYPAGE;
           let param = {
               pageIndex:this.pageIndex,
               pageSize:this.pageSize,
            //    trueName:this.trueName,
            //    mobile:this.mobile
           };
           if(this.trueName != ''){
               param.trueNameLike = this.trueName;
           }
           if(this.mobile != ''){
               param.mobileLike = this.mobile;
           }
           this.loading = true;
            common.post(url,param,(res)=>{
                this.loading = false;
                let data = res.data;
                this.tableData = data.bussData;
                this.pageCount = data.pageCount*this.pageSize;
            })
        },
        deleteAccount:function(id) {
            this.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let  url = CONSTANT.URL.SYSTEM.DELETEADMINUSERBYID;
                common.del(url,id,(res)=>{
                    if(res.code == 200){
                        this.$message({
                            type:'success',
                            message:'删除成功!'
                        });
                        this.getAccountList();
                    }
                    else{
                        this.$message({
                            type:'warning',
                            message:res.msg
                        })
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleAble(item) {
          let url = CONSTANT.URL.SYSTEM.enable,
            enable = item.enable == 'y' ? 'n' : 'y'
          common.post(url+enable+"/"+item.id,null,(res)=>{
            if(res.code == 200){
              this.$message({
                type:'success',
                message:item.enable == 'y' ? '禁用成功' : '启用成功'
              });
              this.getAccountList();
            }
            else{
              this.$message({
                type:'warning',
                message:res.msg
              })
            }
          })
        },
        addItem(){
            this.$router.push('/accountEdit')
        },
        search:function(e){
            if(e.keyCode == 13){
                this.pageIndex = 1;
                this.getAccountList();
            }
        },
        handleSizeChange(val) {
            this.pageSize= val;
            this.getAccountList();
        },
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.getAccountList();
        },
        handleClick() {
            let url = '/'+ this.url;
            this.$router.push(url);
        },
    },
    filters:{

    }
}
</script>
<style lang="scss">
    .role{
        .el-tabs__nav-wrap{
            padding:8px 10px;
        }
    }
</style>
